<template>
  <div class="vue-easymde-editor">
    <textarea ref="textArea"></textarea>
  </div>
</template>

<script lang="ts">
/**
 * @component
 * @assetTitle 编辑器
 * @assetDescription 封装第三方编辑器组件
 * @assetImportName Editor
 * @assetTag 通用组件
 */
import { defineComponent, onMounted, ref, onUnmounted, watch } from "vue";
import EasyMDE, { Options } from "easymde";
// 封装属性
// interface EditorProps {
//   modelValue?: string; // 双向绑定监听事件
//   options?: Options; // easymde配置项
// }
// 封装事件
interface EditorEvents {
  (type: "update:modelValue", value: string): void; // 支持update:xx这种写法的事件
  (type: "change", value: string): void;
  (type: "blur"): void;
}
export default defineComponent({
  name: "App",
  props: {
    modelValue: {
      // 双向绑定监听事件
      type: String,
      required: false
    },
    options: {
      // easymde配置项
      type: Object,
      required: false
    }
  },
  setup(props, content) {
    //初始化的数据
    const textArea = ref<null | HTMLTextAreaElement>(null); // dom元素
    let easyMDEInstance: EasyMDE | null = null; // 编辑器实例对象
    // 初始化编辑器中的默认值
    const innerValue = ref(props.modelValue || "");
    // 用于点击编辑的时候 父组件传入的props修改 触发watch
    watch(
      () => props.modelValue,
      newValue => {
        if (easyMDEInstance) {
          if (newValue !== innerValue.value) {
            easyMDEInstance.value(newValue || "");
          }
        }
      }
    );
    // 1 暴露对应的方法
    // 2 结合页面实现验证的功能
    onMounted(() => {
      if (textArea.value) {
        // 初始化编辑器
        // 1. 组装 options
        const config: Options = {
          ...(props.options || {}),
          element: textArea.value, // 代表dom节点
          initialValue: innerValue.value
        };
        easyMDEInstance = new EasyMDE(config);
        // 监控第三方编辑器中包含的对应的事件
        easyMDEInstance.codemirror.on("change", () => {
          if (easyMDEInstance) {
            // 拿到当前的值
            const updateValue = easyMDEInstance?.value();
            innerValue.value = updateValue;
            content.emit("update:modelValue", updateValue);
            content.emit("change", updateValue);
          }
        });
        easyMDEInstance.codemirror.on("blur", () => {
          if (easyMDEInstance) {
            content.emit("blur");
          }
        });
      }
    });
    // 销毁对应的实例对象
    onUnmounted(() => {
      if (easyMDEInstance) {
        easyMDEInstance.cleanup();
      }
      easyMDEInstance = null;
    });

    // 1 暴露对应的方法-清除文本框
    const clear = () => {
      if (easyMDEInstance) {
        easyMDEInstance.value(""); // 设置为空
      }
    };
    // 支持开发者使用的 获取编辑器实例
    const getMDEInstance = () => {
      return easyMDEInstance;
    };
    return { textArea, clear, getMDEInstance };
  }
});
</script>

<style>
.vue-easymde-editor.is-invalid {
  border: 1px solid #dc3545;
}
</style>
